<template>
  <div class="dashboard-editor-container">
    <el-card class="margin-bottom-xs" shadow="hover" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in addons" :key="index" :md="6" :xs="6" :xl="3" :lg="3" :sm="6">
          <div class="addons-item" @click="goAddons(item)">
            <div class="index-title" :class="{ 'lines-cyan': index % 2 === 0 }">
              <svg-icon class="icon" :icon-class="item.icon" :size="50" />
            </div>
            <div class="addons-title">
              {{ item.title }}
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <div class="sys-info-main">
      <div class="panel-group">
        <el-row :gutter="20">
          <el-col :sm="24" :xl="16" :md="16" :lg="16">
            <el-row :gutter="20">
              <el-col class="lately-day">近七日成交量与访问量 </el-col>
            </el-row>
            <div class="data-map">
              <div id="main" class="mian" />
            </div>
          </el-col>
          <el-col :sm="24" :xl="8" :md="8" :lg="8">
            <el-row :gutter="20" :class="{'margin-top':device === 'mobile'}">
              <el-col class="lately-day">转化率 </el-col>
            </el-row>
            <div class="percent text-center">
              <div class="percent-time" @click="changetime">
                {{ timeValueArr }}
              </div>
              <el-progress type="circle" :width="147" color="#1875F0" :percentage="25" />
              <div class="precent-yes">昨日总流量</div>
              <div class="el-progress__text">2150</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- <el-date-picker
          v-model="timeValueArr"
          type="daterange"
          ref="datePickerRef"
          class="date_style"
          v-show="false"
          @change="fnchooseCustomTime"
        >
        </el-date-picker> -->
    </div>
  </div>
</template>

<script>
import { fetchList } from '@projectName/api/addons/addons.js'
import PanelGroup from '@projectName/components/system-page/dashboard/bloc/components/PanelGroup'
import { mapState } from 'vuex'
export default {
  name: 'BlocDashboard',
  components: {
    PanelGroup
  },
  computed: {
    ...mapState({
      device: state => state.app.device
    })
  },
  data() {
    return {
      value1: '',
      timeValueArr: '',
      list: [],
      addons: [
        {
          icon: 'zyj-yh',
          title: '酒店管理',
          identifie: 'diandi_hotel'
        },
        {
          icon: 'zyj-js',
          title: '房态管理',
          identifie: 'diandi_place'
        },
        {
          icon: 'zyj-js',
          title: '商城',
          identifie: 'zyj_mall'
        },
        {
          icon: 'zyj-js',
          title: '积分',
          identifie: 'diandi_integral'
        }
      ]
    }
  },
  mounted() {
    this.getlately()
    this.addDate()
    // this.getList()
  },
  methods: {
    goAddons: function(item) {
      const menuType = item.identifie
      this.$store.dispatch('settings/setIsIndex', false)
      this.$store.dispatch('settings/setMenuType', menuType)
      this.$store.dispatch('settings/setAddonsTitle', item.title)
      const route = `/${menuType}/default/index.vue`
      this.$router.push(route)
    },
    getList() {
      const that = this
      that.listLoading = true
      fetchList({}).then((response) => {
        const list = response.data.dataProvider.allModels
        that.list = [...list]
      })
    },
    addDate() {
      const nowDate = new Date()
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      this.timeValueArr = date.year + '-' + date.month + '-' + date.date
    },
    getlately() {
      var myChart = this.$echarts.init(document.getElementById('main'))
      var option = {
        legend: {
          icon: 'rect',
          itemWidth: 27,
          itemHeight: 3,
          padding: [10, 0, 0, 0],
          data: ['成交量', '访问量']
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#1E87F0',
              fontSize: '13'
            }
          }
        },
        series: [
          {
            name: '成交量',
            type: 'line',
            symbol: 'none',
            smooth: false,
            color: '#0063ED',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '访问量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbol: 'none',
            color: '#FF9307'
          }
        ]
      }
      myChart.setOption(option)
    },
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    },
    changetime() {
      this.$refs.datePickerRef.$el.click()
    },
    fnchooseCustomTime(value) {
      this.timeValue = value.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 24px;
    position: relative;

    .sys-info-main {
        .lately-day {
            color: #1c2e32;
            font-size: 21px;
        }

        .lately-title {
            color: #a4a4a4;
            font-size: 19px;
        }
    }

    .data-map {
        height: 401px;
        background: #ffffff;
        border-radius: 9px;
        margin-top: 37px;
    }

    .lately-day-color {
        color: #1e87f0;
        font-size: 19px;
    }

    .percent {
        height: 402px;
        background: #ffffff;
        border-radius: 8px;
        margin-top: 37px;

        .percent-time {
            color: #1e87f0;
            font-size: 23px;
            padding: 32px 0;
        }

        .precent-yes {
            padding: 37px 0 25px;
            color: #c5c5c5;
            font-size: 19px;
        }
    }
}

.addons-item {
  display: grid;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 20px;
}

::v-deep .el-progress__text {
    font-size: 32px !important;
    color: #1875f0 !important;
}

.date_style {
    opacity: 0;
}

.mian {
    height: 400px;
    width: 100%;
}

.addons-container {
    background: #f3f4f7 !important;
    padding: 25px;
}

.addons-search {
    padding: 15px 27px;
    background: #fff;
    border-radius: 11px;
}

.main-content {
    display: flow-root;
}

.index-title {
    text-align: center;
    align-items: center;
    display: grid;
    font-size: 53px;
    border-radius: 30px;
    color: #567feb;
}

.addons-title {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}

.content-itm {
    margin-top: 29px;
    height: 189px !important;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #fff;
    position: relative;
}

.table-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    height: auto;
}

.btn-use {
    width: 82px;
    height: 36px;
    cursor: pointer;
    background: #f1f1f1;
    border-radius: 21px;
    color: #aaaaaa;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
}

.el-pagination {
    margin: 20px auto;
    width: 200px;
}
</style>
